<template>
	<view class="MaterialReviewOrder" :class="{ skelett: isSkelett }">
		<view class="MaterialReviewOrder-nav">
			<DistributionNavBar title="详情" rgb="#fff">
				<template slot="left">
					<image :src="bankIcon" @click="clickBack" />
				</template>
			</DistributionNavBar>
		</view>

		<DistributionOrderHeader type="audit" :isSkelett="isSkelett" />

		<view class="MaterialReviewOrder-info">
			<view class="MaterialReviewOrder-info-type">
				<view class="MaterialReviewOrder-info-type-item" :key="item.type" v-for="item in infoTypeList">
					<view class="MaterialReviewOrder-info-type-item-left">
						<text>{{ item.label }}</text>
					</view>

					<view class="MaterialReviewOrder-info-type-item-right">
						<text>{{ pageParams[item.type] }}</text>

						<template v-if="item.isCopy && !isSkelett">
							<button @click.stop.prevent="copyorderNo(item)">复制</button>
						</template>
					</view>
				</view>
			</view>
			<view class="MaterialReviewOrder-info-content">
				<DistributionMaterial :skelettSize="1" :isSkelett="isSkelett" :isFooter="false" isPreview :list="producrList" />
			</view>
		</view>

		<view class="MaterialReviewOrder-rule">
			<CommonMateriaHeader :isSkelett="isSkelett" :list="materialHintList" />
		</view>

		<view class="MaterialReviewOrder-main">
			<MaterialResource :list="uploadStatusFileList" :remote="remote" :isSkelett="isSkelett" :orderStatus="approveStatus" />
		</view>

		<view class="MaterialReviewOrder-footer">
			<button @click="openCancelCommonApplication">取消申请</button>
		</view>
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';
import { formatCommissionsModel, secondFormatMinute } from '@/utils/common';
import { getResourceRule, getMaterailDetail, getMaterailStatusList } from '@/api/material';

import MaterialResource from './components/MaterialResource';
import CommonMateriaHeader from './components/CommonMateriaHeader';
import DistributionMaterial from '@/components/distributionMaterial';
import DistributionOrderHeader from '@/components/distributionOrderHeader';
import DistributionNavBar from '@/components/distributionNavBar/indeHome.vue';

const bankIcon = Object.freeze(`${defaultImageUrl}help/icon_navbar_back.png`);

const infoTypeList = Object.freeze([
	{
		isCopy: true,
		type: 'orderNo',
		label: '订单编号'
	},
	{
		type: 'uploadTime',
		label: '提交时间'
	}
]);

export default {
	name: 'MaterialReviewOrder',

	data() {
		return {
			bankIcon,
			infoTypeList,
			approveStatus: 1,

			isSkelett: true,
			remote: true,
			pageParams: {},
			producrList: [],
			uploadStatusFileList: [],
			materialHintList: [{}, {}]
		};
	},

	onLoad(params) {
		const { orderId, approveStatus = 1, uploadNo } = params;

		if (!orderId) {
			return;
		}

		const requestParams = {
			approveStatus,
			resourceType: 3,
			orderNo: uploadNo,
			productId: orderId
		};

		this.temporaryParams = requestParams;
		this.approveStatus = Number(approveStatus);

		this.getAllPageData();
	},

	methods: {
		copyorderNo({ type }) {
			const { pageParams } = this;

			uni.setClipboardData({
				data: pageParams[type]
			});
		},

		getAllPageData(params = this.temporaryParams) {
			Promise.all([getMaterailDetail(params), getMaterailStatusList(params), getResourceRule()]).then((res) => {
				const [detailParams, materailList, productRule] = res || [];

				const { faceImg, orderNo, uploadTime, productName, originPrice, salePrice, commission, productConfig } =
					detailParams?.data || {};
				this.pageParams = {
					orderNo,
					uploadTime
				};

				this.producrList = [
					{
						faceImg,
						salePrice,
						originPrice,
						productTitle: productName,
						commissionsList: formatCommissionsModel(commission)
					}
				];

				const { imgResource, videoResource } = materailList?.data || {};

				this.uploadStatusFileList = [
					{
						type: 'image',
						list: (imgResource || []).map((item) => {
							const { url } = item;

							return {
								type: 'image',
								previewUrl: url,
								tempFilePath: url
							};
						})
					},
					{
						type: 'video',
						list: (videoResource || []).map((item) => {
							const { id, url, pixel = '', duration, coverUrl } = item;
							const height = pixel.split('*')[1] || 0;

							return {
								id,
								height,
								type: 'video',
								tempFilePath: url,
								previewUrl: coverUrl,
								duration: secondFormatMinute(duration)
							};
						})
					}
				];

				let hintParams = {};

				(productRule?.data || []).forEach((item) => {
					hintParams[item.code] = item.value;
				});

				this.hintParams = hintParams;

				const { imgSalePrice, imgCreatorPercent, videoSalePrice, videoCreatorPercent } = productConfig;

				const imageMoney = (imgSalePrice * imgCreatorPercent) / 1_0000;
				const videoMoney = (videoSalePrice * videoCreatorPercent) / 1_0000;
				let minMediaNumber = Math.min(hintParams.td_resource_rule_1, hintParams.td_resource_rule_2);
				this.materialHintList = [
					{
						label: `每次上传素材，图片+视频不少于${minMediaNumber}个，最多不超过${
							Number(hintParams.td_resource_rule_6) + Number(hintParams.td_resource_rule_7)
						}个`
					},
					{
						label: `图片被下载预估收益${imageMoney.toFixed(2)}元/张，视频被下载预估收益${videoMoney.toFixed(2)}元/份`
					}
				];

				this.isSkelett = false;
			});
		},

		clickBack() {
			uni.navigateBack();
		},

		openCancelCommonApplication() {
			const { temporaryParams } = this;

			let otherParams = '';
			for (const key in temporaryParams) {
				otherParams += `&${key}=${temporaryParams[key]}`;
			}

			uni.redirectTo({
				url: `/productOrderPage/CancelCommonApplication?isMaterial=1${otherParams}`
			});
		}
	},

	components: {
		DistributionNavBar,
		MaterialResource,
		DistributionMaterial,
		CommonMateriaHeader,
		DistributionOrderHeader
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.MaterialReviewOrder {
	padding: 0 20rpx;
	overflow-x: hidden;
	@include Db_iosBottomDistance(120rpx);

	&-nav {
		margin: 0 -20rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	&-info {
		height: 368rpx;
		overflow: hidden;
		background: #fff;
		border-radius: 24rpx;

		margin-top: -94rpx;
		padding: 0 20rpx;
		position: relative;

		&-type {
			overflow: hidden;
			padding-bottom: 28rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);

			&-item {
				color: #333;
				font-size: 28rpx;

				display: flex;
				margin-top: 32rpx;

				&-left {
					width: 152rpx;
				}

				&-right {
					flex: 1;
					display: flex;
					align-items: center;

					color: #1f1f1f;
					font-weight: bold;

					button {
						border: none;
						// width: 64rpx;
						height: 36rpx;
						line-height: 36rpx;
						background: transparent;
						margin: 0 0 0 16rpx;

						color: #333;
						font-size: 20rpx;
						padding: 0 12rpx;
						font-weight: 400;
					}
				}

				&:last-child {
					margin-top: 28rpx;
				}
			}
		}

		&-content {
			margin: 0 -20rpx;
		}
	}

	&-rule,
	&-main {
		margin-top: 20rpx;
	}

	&.skelett {
		.MaterialReviewOrder-info-type-item-left {
			border-radius: 12rpx;
			background: $skelettBgColor;

			text {
				visibility: hidden;
			}
		}
	}

	&-footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		border-radius: 0;
		background: #fff;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 51, 51, 0.14);

		padding: 16rpx 28rpx;
		@include Db_iosBottomDistance(16rpx);

		button {
			@include Db_commonButton(88rpx, 24rpx);

			color: #333;
			background: #eee;

			&:active {
				background: rgba(238, 238, 238, 0.7);
			}
		}
	}
}
</style>
